<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式地图 - 杭州华家池到德清莫干山两日游攻略</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
            height: 100%;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .sidebar {
            width: 300px;
            height: 100%;
            overflow-y: auto;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f8f9fa;
        }
        #map-container {
            flex: 1;
            height: 100%;
        }
        .day-card {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .day-title {
            font-weight: bold;
            color: #0078ff;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .poi-item {
            margin-bottom: 8px;
            cursor: pointer;
        }
        .poi-item:hover {
            color: #0078ff;
        }
        .category {
            font-weight: bold;
            margin: 10px 0 5px;
        }
        .info-window {
            padding: 10px;
            max-width: 300px;
        }
        .info-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #0078ff;
        }
        .info-address {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
        .info-desc {
            font-size: 13px;
        }
        .btn {
            display: inline-block;
            padding: 5px 10px;
            background: #0078ff;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            font-size: 12px;
            margin-top: 5px;
        }
        .legend {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .legend-color {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border-radius: 50%;
        }
        .route-btn {
            margin-top: 15px;
            background: #0078ff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>杭州华家池到德清莫干山两日游</h2>
            <p>2025年7月5日-2025年7月6日（2天）</p>
            
            <div style="margin-bottom: 15px;">
                <a href="index.html" style="color: #0078ff; text-decoration: none; margin-right: 10px;">首页</a>
                <a href="景点详情.html" style="color: #0078ff; text-decoration: none; margin-right: 10px;">景点详情</a>
                <a href="美食推荐.html" style="color: #0078ff; text-decoration: none;">美食推荐</a>
            </div>
            
            <button class="route-btn" onclick="showFullRoute()">显示完整自驾路线</button>
            
            <div id="itinerary">
                <!-- 行程内容将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <div id="map-container"></div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color" style="background-color: #3366FF;"></div>
                <span>景点</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #FF6600;"></div>
                <span>餐厅</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #33CC33;"></div>
                <span>住宿</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #0078ff;"></div>
                <span>路线</span>
            </div>
        </div>
    </div>

    <script>
        // 动态加载高德地图API
        function loadAMapScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://webapi.amap.com/maps?v=2.0&key=73fbf010867aee81f74c91d3a77f4e05&callback=initMap';
            document.head.appendChild(script);
        }
        
        // 初始化地图
        function initMap() {
            const map = new AMap.Map('map-container', {
                zoom: 10,
                center: [119.95, 30.53] // 德清中心点
            });
        
        // 添加比例尺和指南针控件
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ToolBar());
        
        // 定义位置坐标
        const locations = {
            '杭州华家池': [120.192722, 30.261552],
            '如家丽岚睿柏云酒店': [119.953931, 30.533385],
            '碧坞龙潭景区': [119.842358, 30.631497],
            '碧坞龙潭鱼鳞坝': [119.842358, 30.631497],
            '碧坞龙潭清潭区': [119.842358, 30.631497]
        };
        
        // 定义景点、餐厅和住宿信息
        const pois = [
            // 第1天
            { name: '杭州华家池', type: 'start', position: [120.192722, 30.261552], day: 1, desc: '行程起点' },
            { name: '如家丽岚睿柏云酒店', type: 'hotel', position: [119.953931, 30.533385], day: 1, desc: '德清西站店，位于武康镇志远南路405号' },
            { name: '安庆风味餐厅', type: 'restaurant', position: [119.955, 30.535], day: 1, desc: '位于酒店附近的顺达路17号，提供特色美食' },
            { name: '碧坞龙潭景区', type: 'attraction', position: [119.842358, 30.631497], day: 1, desc: '适合溯溪戏水的景区，有清澈的溪流和自然风光，成人票65元，儿童/老人33元' },
            { name: '莫干山大酒店·零点餐厅', type: 'restaurant', position: [119.951, 30.531], day: 1, desc: '位于永安街25号，提供当地特色菜' },
            
            // 第2天
            { name: '碧坞龙潭鱼鳞坝', type: 'attraction', position: [119.842358, 30.631497], day: 2, desc: '景区内的梯级瀑布，形成多个小型水潭，适合孩子戏水' },
            { name: '碧坞农家乐', type: 'restaurant', position: [119.843, 30.630], day: 2, desc: '位于景区附近，提供当地特色农家菜' },
            { name: '碧坞龙潭清潭区', type: 'attraction', position: [119.842358, 30.631497], day: 2, desc: '景区内水流平缓的区域，有清澈的水潭，适合小孩戏水' }
        ];
        
        // 定义每天的行程路线
        const routes = [
            { day: 1, from: '杭州华家池', to: '如家丽岚睿柏云酒店', waypoints: [] },
            { day: 1, from: '如家丽岚睿柏云酒店', to: '碧坞龙潭景区', waypoints: [] },
            { day: 1, from: '碧坞龙潭景区', to: '如家丽岚睿柏云酒店', waypoints: [] },
            { day: 2, from: '如家丽岚睿柏云酒店', to: '碧坞龙潭景区', waypoints: [] },
            { day: 2, from: '碧坞龙潭景区', to: '杭州华家池', waypoints: [] }
        ];
        
        // 创建不同类型的标记
        const markers = [];
        const infoWindows = [];
        
        // 为每个POI创建标记
        pois.forEach(poi => {
            let icon;
            switch(poi.type) {
                case 'attraction':
                    icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png';
                    break;
                case 'restaurant':
                    icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png';
                    break;
                case 'hotel':
                    icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png';
                    break;
                case 'start':
                    icon = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-start.png';
                    break;
            }
            
            const marker = new AMap.Marker({
                position: poi.position,
                title: poi.name,
                icon: new AMap.Icon({
                    size: new AMap.Size(25, 34),
                    image: icon,
                    imageSize: new AMap.Size(25, 34)
                }),
                offset: new AMap.Pixel(-13, -34),
                extData: { day: poi.day, type: poi.type }
            });
            
            // 创建信息窗口
            const content = `
                <div class="info-window">
                    <div class="info-title">${poi.name}</div>
                    <div class="info-address">第${poi.day}天</div>
                    <div class="info-desc">${poi.desc}</div>
                    <a class="btn" href="https://uri.amap.com/marker?position=${poi.position[0]},${poi.position[1]}&name=${poi.name}&src=mypage&coordinate=gaode&callnative=1" target="_blank">导航到这里</a>
                </div>
            `;
            
            const infoWindow = new AMap.InfoWindow({
                content: content,
                offset: new AMap.Pixel(0, -34)
            });
            
            // 点击标记时打开信息窗口
            marker.on('click', () => {
                infoWindow.open(map, marker.getPosition());
            });
            
            markers.push(marker);
            infoWindows.push(infoWindow);
        });
        
        // 将所有标记添加到地图
        map.add(markers);
        
        // 生成侧边栏行程内容
        const itineraryContainer = document.getElementById('itinerary');
        
        // 按天生成行程
        for (let day = 1; day <= 2; day++) {
            const dayPois = pois.filter(poi => poi.day === day);
            
            // 创建每天的行程卡片
            const dayCard = document.createElement('div');
            dayCard.className = 'day-card';
            
            // 添加日期标题
            const dayTitle = document.createElement('div');
            dayTitle.className = 'day-title';
            const date = new Date(2025, 6, 4 + day); // 7月5日开始
            dayTitle.textContent = `第${day}天 (${date.getMonth() + 1}月${date.getDate()}日)`;
            dayCard.appendChild(dayTitle);
            
            // 添加当天行程路线按钮
            const dayRoutes = routes.filter(r => r.day === day);
            if (dayRoutes.length > 0) {
                dayRoutes.forEach((route, index) => {
                    const routeBtn = document.createElement('button');
                    routeBtn.className = 'route-btn';
                    routeBtn.style.marginBottom = '10px';
                    routeBtn.textContent = `路线${index + 1}: ${route.from} → ${route.to}`;
                    routeBtn.onclick = () => showRoute(route.from, route.to);
                    dayCard.appendChild(routeBtn);
                });
            }
            
            // 分类添加景点
            const attractions = dayPois.filter(poi => poi.type === 'attraction');
            if (attractions.length > 0) {
                const attractionTitle = document.createElement('div');
                attractionTitle.className = 'category';
                attractionTitle.textContent = '景点';
                dayCard.appendChild(attractionTitle);
                
                attractions.forEach(attraction => {
                    const poiItem = document.createElement('div');
                    poiItem.className = 'poi-item';
                    poiItem.textContent = attraction.name;
                    poiItem.onclick = () => {
                        // 定位到该POI并打开信息窗口
                        const index = pois.findIndex(p => p.name === attraction.name && p.day === day);
                        if (index !== -1) {
                            map.setCenter(markers[index].getPosition());
                            map.setZoom(14);
                            infoWindows[index].open(map, markers[index].getPosition());
                        }
                    };
                    dayCard.appendChild(poiItem);
                });
            }
            
            // 分类添加餐厅
            const restaurants = dayPois.filter(poi => poi.type === 'restaurant');
            if (restaurants.length > 0) {
                const restaurantTitle = document.createElement('div');
                restaurantTitle.className = 'category';
                restaurantTitle.textContent = '餐饮';
                dayCard.appendChild(restaurantTitle);
                
                restaurants.forEach(restaurant => {
                    const poiItem = document.createElement('div');
                    poiItem.className = 'poi-item';
                    poiItem.textContent = restaurant.name;
                    poiItem.onclick = () => {
                        // 定位到该POI并打开信息窗口
                        const index = pois.findIndex(p => p.name === restaurant.name && p.day === day);
                        if (index !== -1) {
                            map.setCenter(markers[index].getPosition());
                            map.setZoom(14);
                            infoWindows[index].open(map, markers[index].getPosition());
                        }
                    };
                    dayCard.appendChild(poiItem);
                });
            }
            
            // 分类添加住宿
            const hotels = dayPois.filter(poi => poi.type === 'hotel');
            if (hotels.length > 0) {
                const hotelTitle = document.createElement('div');
                hotelTitle.className = 'category';
                hotelTitle.textContent = '住宿';
                dayCard.appendChild(hotelTitle);
                
                hotels.forEach(hotel => {
                    const poiItem = document.createElement('div');
                    poiItem.className = 'poi-item';
                    poiItem.textContent = hotel.name;
                    poiItem.onclick = () => {
                        // 定位到该POI并打开信息窗口
                        const index = pois.findIndex(p => p.name === hotel.name && p.day === day);
                        if (index !== -1) {
                            map.setCenter(markers[index].getPosition());
                            map.setZoom(14);
                            infoWindows[index].open(map, markers[index].getPosition());
                        }
                    };
                    dayCard.appendChild(poiItem);
                });
            }
            
            itineraryContainer.appendChild(dayCard);
        }
        
        // 当前显示的路线
        let currentRoute = null;
        
        // 显示路线
        function showRoute(from, to) {
            // 清除当前路线
            if (currentRoute) {
                map.remove(currentRoute);
            }
            
            const startPos = locations[from];
            const endPos = locations[to];
            
            if (!startPos || !endPos) return;
            
            // 使用高德地图驾车路线规划
            AMap.plugin('AMap.Driving', function() {
                const driving = new AMap.Driving({
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                    map: map
                });
                
                driving.search(
                    new AMap.LngLat(startPos[0], startPos[1]), 
                    new AMap.LngLat(endPos[0], endPos[1]),
                    function(status, result) {
                        if (status === 'complete') {
                            // 保存当前路线
                            currentRoute = driving.getRoute();
                            
                            // 调整地图视野以包含路线
                            map.setFitView();
                        }
                    }
                );
            });
        }
        
        // 显示完整自驾路线
        function showFullRoute() {
            // 清除当前路线
            if (currentRoute) {
                map.remove(currentRoute);
            }
            
            // 显示所有POI
            markers.forEach(marker => marker.show());
            
            // 使用高德地图驾车路线规划
            AMap.plugin('AMap.Driving', function() {
                const driving = new AMap.Driving({
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                    map: map
                });
                
                // 构建完整路线的途经点
                const waypoints = [
                    new AMap.LngLat(locations['如家丽岚睿柏云酒店'][0], locations['如家丽岚睿柏云酒店'][1]),
                    new AMap.LngLat(locations['碧坞龙潭景区'][0], locations['碧坞龙潭景区'][1]),
                    new AMap.LngLat(locations['如家丽岚睿柏云酒店'][0], locations['如家丽岚睿柏云酒店'][1]),
                    new AMap.LngLat(locations['下渚湖湿地公园'][0], locations['下渚湖湿地公园'][1])
                ];
                
                const startPos = locations['杭州华家池'];
                const endPos = locations['杭州华家池'];
                
                driving.search(
                    new AMap.LngLat(startPos[0], startPos[1]), 
                    new AMap.LngLat(endPos[0], endPos[1]),
                    { waypoints: waypoints },
                    function(status, result) {
                        if (status === 'complete') {
                            // 保存当前路线
                            currentRoute = driving.getRoute();
                            
                            // 调整地图视野以包含路线
                            map.setFitView();
                        }
                    }
                );
            });
        }
        
        // 调整地图视野以包含所有标记
        map.setFitView();
        }
        
        // 加载地图
        loadAMapScript();
    </script>
</body>
</html> 